<template>
  <a-form-model layout="vertical" :model="properties" ref="propForm" :rules="rules">
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-model-item label="IP" prop="ip">
          <a-input v-model="properties.ip" placeholder="请输入IP" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="端口" prop="port">
          <a-input-number v-model="properties.port" placeholder="请输入端口" style="width: 100%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="PLC型号" prop="model">
          <a-select v-model="properties.model" placeholder="请选择PLC型号" style="width: 100%">
            <a-select-opt-group v-for="(group, groupIndex) in plcModelGroups" :key="groupIndex" :label="group.group">
              <a-select-option v-for="(item, itemIndex) in group.list" :value="item.code" :key="itemIndex">
                {{ item.name }}
              </a-select-option>
            </a-select-opt-group>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item label="超时时间(ms)" prop="timeout">
          <a-input-number v-model="properties.timeout" placeholder="请输入超时时间" style="width: 100%" />
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>

<script>

import { plcModelGroups } from '@/config/s7plc.config'
export default {
  data() {
    return {
      properties: {
        ip: "127.0.0.1",
        port: 102,
        model: "S1200",  // 默认选择S1200
        timeout: 1000
      },
      plcModelGroups,  // 将导入的数据直接赋值给组件的数据
      rules: {
        ip: [{ required: true, message: "请输入IP", trigger: "blur" }],
        port: [{ required: true, message: "请输入端口", trigger: "blur" }],
        model: [{ required: true, message: "请输入从站地址", trigger: "blur" }],
        timeout: [{ required: true, message: "请输入超时时间", trigger: "blur" }]
      }
    };
  },
  methods: {
    set(properties) {
      this.properties = Object.assign({}, this.properties, properties);
    },
    get(callback) {
      let that = this;
      this.$refs.propForm.validate((valid) => {
        if (valid) {
          return callback(true, that.properties);
        } else {
          return callback(false);
        }
      });
    },
    importComponent(type) {
      console.log(type);  // 你可以在这里处理类型变化时的业务逻辑
    }
  }
};
</script>

<style scoped>
</style>
